<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh_CN">
<%
    String path = request.getContextPath();
    // 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta charset="utf-8"/>
    <title>管理员控制台</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <base href=" <%=basePath%>">

    <script src="js/jquery-1.9.1.min.js"></script>


    <script src="js/bootstrap.min.js"></script>
    <link href="bootstrap3.3.5/css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-select.min.css" rel="stylesheet"/>

    <script src="js/bootstrap-table.js"></script>
    <link href="css/bootstrap-table.css" rel="stylesheet" />
    <link href="css/jquery.alertable.css" rel="stylesheet"/>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/defaults-zh_CN.min.js"></script>
    <script src="js/html2canvas.js"></script>
    <script src="js/jsPdf.debug.js"></script>
    <script src='js/velocity.min.js'></script>
    <script src='js/velocity.ui.min.js'></script>
    <script src="js/jquery.alertable.js"></script>
    <style type="text/css">
        body{
            font-family: 'Open Sans';
            font-size: 13px;
            color: #393939;
            line-height: 1.5;
        }
        .page-header {
            margin: 0 0 12px;
            border-bottom: 1px dotted #e2e2e2;
            padding-bottom: 16px;
            padding-top: 7px;
        }
        .page-header h1 {
            padding: 0;
            margin: 0 8px;
            font-size: 24px;
            font-weight: lighter;
            color: #2679b5;
        }
        .table-header{
            background-color: #307ecc;
            color: #FFF;
            font-size: 14px;
            line-height: 38px;
            padding-left: 12px;
            margin-bottom: 1px;
        }
    </style>
</head>
<body>
<div class="page-header">
    <h1>
        工作流默认审核管理
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            维护工作流关卡与审核人的关系
        </small>
    </h1>
</div>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="search_itemType">物料类型</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="search_itemType">
                    </div>
                    <label class="control-label col-sm-1" for="search_attrName">属性名称</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="search_attrName">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="tb_desc"></table>

    <%--<form method="post" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;">--%>
        <%--<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">--%>
            <%--<div class="modal-dialog">--%>
                <%--<div class="modal-content">--%>
                    <%--<div class="modal-header">--%>
                        <%--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">--%>
                            <%--&times;--%>
                        <%--</button>--%>
                        <%--<h4 class="modal-title" id="myModalLabel">--%>
                            <%--用户信息--%>
                        <%--</h4>--%>
                    <%--</div>--%>
                    <%--<div class="modal-body">--%>
                        <%--<form class="form-horizontal" role="form">--%>
                            <%--<div class="form-group">--%>
                                <%--<label for="user_id" class="col-sm-3 control-label">用户ID</label>--%>
                                <%--<div class="col-sm-9">--%>
                                    <%--<input type="text" class="form-control" id="user_id" name="user_id" value="{user_id}"--%>
                                           <%--placeholder="请输入用户ID">--%>
                                <%--</div>--%>
                            <%--</div>--%>

                            <%--<div class="form-group">--%>
                                <%--<label for="user_name" class="col-sm-3 control-label">用户名</label>--%>
                                <%--<div class="col-sm-9">--%>
                                    <%--<input type="text" class="form-control" name="user_name" value="" id="user_name"--%>
                                           <%--placeholder="用户名">--%>
                                <%--</div>--%>
                            <%--</div>--%>
                            <%--<div class="form-group">--%>
                                <%--<label for="address" class="col-sm-3 control-label">地址</label>--%>
                                <%--<div class="col-sm-9">--%>
                                    <%--<input type="text" class="form-control" name="address" value="" id="address"--%>
                                           <%--placeholder="地址">--%>
                                <%--</div>--%>
                            <%--</div>--%>

                            <%--&lt;%&ndash;<div class="form-group">&ndash;%&gt;--%>
                                <%--&lt;%&ndash;<label for="remark" class="col-sm-3 control-label">备注</label>&ndash;%&gt;--%>
                                <%--&lt;%&ndash;<div class="col-sm-9">&ndash;%&gt;--%>
                                <%--&lt;%&ndash;<textarea  class="form-control"  name="remark" value="{remark}" id="remark"&ndash;%&gt;--%>
                                           <%--&lt;%&ndash;placeholder="备注">&ndash;%&gt;--%>

                                <%--&lt;%&ndash;</textarea>&ndash;%&gt;--%>
                                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
                            <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
                        <%--</form>--%>
                    <%--</div>--%>
                    <%--<div class="modal-footer">--%>
                        <%--<button type="button" class="btn btn-default" data-dismiss="modal">关闭--%>
                        <%--</button>--%>
                        <%--<button type="submit" class="btn btn-primary">--%>
                            <%--提交--%>
                        <%--</button><span id="tip"> </span>--%>
                    <%--</div>--%>
                <%--</div><!-- /.modal-content -->--%>
            <%--</div><!-- /.modal -->--%>
        <%--</div>--%>
    <%--</form>--%>

    <form id="myModalForm">
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="item_type">物料类型</label>
                            <%--<input type="text" name="item_type" class="form-control" id="item_type" placeholder="物料类型">--%>
                            <select id="item_type" name="itemType"  class="form-control selectpicker"  data-live-search="true" placeholder="物料类型">
                                <option value="物料1">物料1</option>
                                <option value="物料2">物料2</option>
                                <option value="物料3">物料3</option>
                                <option value="物料4">物料4</option>
                                <option value="物料5">物料5</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="attr_name">属性名称</label>
                            <input type="text" name="attrName" class="form-control" id="attr_name" value='' placeholder="属性名称">
                        </div>
                        <div class="form-group">
                            <label for="attr_id">属性ID</label>
                            <input type="text" name="attrId" class="form-control" id="attr_id" value='' placeholder="属性ID">
                        </div>
                        <div class="form-group">
                            <label for="attr_id">顺序</label>
                            <input type="text" name="seq" class="form-control" id="seq" value='' placeholder="顺序">
                        </div>
                        <div class="form-group">
                            <label for="status">状态</label>
                            <input type="text" name="status" class="form-control" id="status" placeholder="状态">
                        </div>
                        <div class="form-group">
                            <label for="remark">备注</label>
                            <textarea  class="form-control"  name="remark"  id="remark" placeholder="备注"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                        <button type="button" id="btn_save" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="application/javascript">

    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_desc').bootstrapTable({
                url: 'plm/desc/page.json',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber:1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                data_local: "zh-CN",                 //表格汉化
                columns: [{
                    checkbox: true
                }, {
                    field: 'itemType',
                    title: '物料类型'
                }, {
                    field: 'attrName',
                    title: '属性名称'
                }, {
                    field: 'attrId',
                    title: '属性ID'
                },{
                    field: 'seq',
                    title: '顺序'
                },{
                    field: 'remark',
                    title: '备注'
                }, {
                    field: 'status',
                    title: '状态'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                itemType:$("#search_itemType").val(),
                attrName:$("#search_attrName").val()
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        oInit.Init = function () {
            $("#btn_query").off("click").on("click",function(){
                //销毁
                $('#tb_desc').bootstrapTable('destroy');
                //1.初始化Table
                var oTable = new TableInit();
                oTable.Init()
                //2.初始化Button的点击事件
                var oButtonInit = new ButtonInit();
                oButtonInit.Init();
            })
            $("#btn_add").off("click").on("click",function(e){
                e.stopPropagation();
                //清空下拉选的缓存
                document.getElementById("item_type").options.selectedIndex = 0; //回到初始状态
                $("#item_type").selectpicker('refresh');//对searchPayState这个下拉框进行重置刷新
                $("#myModalLabel").text("新增");
                $("#myModal").find(".form-control").val("");
                $('#myModal').modal();

                $("#btn_save").off("click").on("click",function(e){
                    e.stopPropagation();
                    $.ajax({
                        url: "plm/desc/save.json",
                        data: $("#myModalForm").serializeArray(),//表格数据
                        type: 'POST',
                        success: function (result) {
                            if (result.ret){
                                //隐藏modal
                                $('#myModal').modal('hide');
                                $.alertable.alert("新增成功");
                                $('#tb_desc').bootstrapTable('refresh');
                            } else{
                                $('#myModal').modal('hide');
                                $.alertable.alert("新增失败:" + result.msg);
                            }
                        }
                    })
                })
            });
            $("#btn_edit").off("click").on("click",function(e){
                $("#myModalLabel").text("Modify");
                $("#myModal").find(".form-control").val("");
                $('#myModal').modal();
            });
            $("#btn_delete").off("click").on("click",function(e){
                var rows = $("#tb_desc").bootstrapTable('getSelections');
                console.log(rows);
            });

            // $("#btn_export").off("click").on("click",function(e){
            //
            //     html2canvas(document.body, {
            //         onrendered:function(canvas) {
            //
            //             var contentWidth = canvas.width;
            //             var contentHeight = canvas.height;
            //
            //             //一页pdf显示html页面生成的canvas高度;
            //             var pageHeight = contentWidth / 595.28 * 841.89;
            //             //未生成pdf的html页面高度
            //             var leftHeight = contentHeight;
            //             //pdf页面偏移
            //             var position = 0;
            //             //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            //             var imgWidth = 555.28;
            //             var imgHeight = 555.28/contentWidth * contentHeight;
            //
            //             var pageData = canvas.toDataURL('image/jpeg', 1.0);
            //
            //             var pdf = new jsPDF('', 'pt', 'a4');
            //             //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //             //当内容未超过pdf一页显示的范围，无需分页
            //             if (leftHeight < pageHeight) {
            //                 pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight );
            //             } else {
            //                 while(leftHeight > 0) {
            //                     pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
            //                     leftHeight -= pageHeight;
            //                     position -= 841.89;
            //                     //避免添加空白页
            //                     if(leftHeight > 0) {
            //                         pdf.addPage();
            //                     }
            //                 }
            //             }
            //
            //             pdf.save('content.pdf');
            //         }
            //     })
            //
            //     if(confirm("您确认下载描述组合数据模板?")){
            //         var pdf = new jsPDF('p','pt','a4');
            //         // 设置打印比例 越大打印越小
            //         pdf.internal.scaleFactor = 2;
            //         var options = {
            //             pagesplit: true,  //设置是否自动分页
            //             "background": '#FFFFFF'   //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
            //         };
            //         var printHtml = $('#pdfsdContnent').get(0);   // 页面某一个div里面的内容，通过id获取div内容
            //         pdf.addHTML(printHtml,15, 15, options,function() {
            //             pdf.save('描述组合.pdf');
            //         });
            //     }
            //
            // });


        };

        return oInit;
    };

    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });
</script>
</body>
</html>
